<route lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '任务中心',
    enablePullDownRefresh: true,
    navigationStyle: 'custom',
  },
}
</route>

<template>
  <page-meta :root-font-size="setting.rootFontSize"></page-meta>
  <view style="min-height: 100vh; padding: 0 20rpx; margin-top: 20rpx; background-color: #f2f2f1">
    <view class="tabbar">
      <wd-navbar style="min-height: 100rpx" :title="`任务中心`" :bordered="false" safeAreaInsetTop>
        <template #left>
          <wd-icon name="thin-arrow-left" size="22px" color="white" @click="goBack"></wd-icon>
        </template>
      </wd-navbar>
      <view class="cu-bar search-container">
        <view class="search-form round">
          <wd-input
            type="text"
            prop="invName"
            v-model="state.names"
            no-border
            clearable
            placeholder="请输入搜索"
            style="display: flex; align-items: center; width: 100%; height: 100%; padding: 0 20rpx"
            @confirm="handleSearch"
            confirm-type="search"
          />
          <text class="filter-icon cuIcon-searchlist" @click="filterIsShow = true"></text>
        </view>
        <view class="action">
          <button
            @click="handleSearch()"
            class="cu-btn bg-gradual-green shadow-blur round"
            style="margin-right: 10rpx"
          >
            查询
          </button>
        </view>
      </view>
    </view>
    <!-- <wd-navbar fixed placeholder title="研发任务列表" left-arrow safeAreaInsetTop>
      <template #left>
        <wd-icon name="thin-arrow-left" size="22px" color="white" @click="goBack"></wd-icon>
      </template>
    </wd-navbar> -->
    <view :style="{ paddingTop: listPT }">
      <template v-for="item in dataList" :key="item.id">
        <card :_D="item"></card>
      </template>
      <wd-loadmore
        :state="loadMore"
        finishedText="没有更多了"
        @reload="handleSearch()"
      ></wd-loadmore>
    </view>
    <wd-popup
      v-model="filterIsShow"
      position="bottom"
      :close-on-click-modal="false"
      custom-style="padding: 32rpx;border-top-left-radius:60rpx;border-top-right-radius:60rpx;"
      @close="handleClose"
    >
      <view class="cu-dialog" @click.stop="">
        <view class="cu-bar bg-white" style="min-height: 60rpx !important">
          <view class="action"></view>
          <view class="action mks" @click="filterIsShow = false">取消</view>
        </view>
        <view class="filter_container">
          <view class="block">
            <view class="label">任务单编码</view>
            <view class="row">
              <input type="text" v-model="state.taskCode" placeholder="请输入任务单编码" />
            </view>
          </view>
          <!-- <view class="block">
            <view class="label">任务单号</view>
            <view class="row">
              <input type="text" v-model="state.taskCode" placeholder="请输入任务单号" />
            </view>
          </view> -->
          <view class="block">
            <view class="label">开始时间</view>
            <view class="row">
              <uni-datetime-picker
                type="date"
                return-type="string"
                v-model="state.startTime"
                placeholder="创建开始时间"
              />
            </view>
          </view>
          <view class="block">
            <view class="label">结束时间</view>
            <view class="row">
              <uni-datetime-picker
                type="date"
                return-type="string"
                v-model="state.endTime"
                placeholder="创建结束时间"
              />
            </view>
          </view>
          <!-- <view class="block">
            <view class="label">结束日期</view>
            <view class="row">
              <uni-datetime-picker
                type="date"
                return-type="string"
                v-model="state.endTime"
                placeholder="结束日期"
              />
            </view>
          </view> -->
          <view class="block" style="margin-top: 60rpx">
            <view class="row">
              <view class="btn" @click="resetFilter">重置</view>
              <view class="btn primary" @click="handleSearch()">查询</view>
            </view>
          </view>
        </view>
      </view>
    </wd-popup>
  </view>
</template>

<script lang="ts" setup name="sign">
import { useSetting } from '@/stores/setting';
import card from './component/card.vue';
import { getRdDemandPage } from '@/service/pm-task';
import { formatByDayjs } from '@/utils/util';
import { useDict } from '@/hooks/dict';
const dataList = ref([]);
const setting = useSetting();
const page = ref(1);
const size = ref(20);
const loading = ref(false);
const loadMore = ref<any>('finished');
uni.$on('refreshList', () => {
  page.value = 1;
  getData();
});
const state = ref({
  taskCode: '',
  demandCode: '',
  projectCode: '',
  webSql: '',
  projectName: '',
  startTime: '',
  endTime: '',
  names: '',
});
const { review_status } = useDict('review_status');
console.log(review_status, 'review_status');

const filterIsShow = ref(false);
const getData = () => {
  uni.showLoading();
  loading.value = true;
  loadMore.value = 'loading';
  if (page.value == 1) {
    dataList.value = [];
  }

  let startDate = state.value.startTime;
  let endDate = state.value.endTime;
  if (endDate && new Date(startDate).getTime() > new Date(endDate).getTime()) {
    uni.showToast({
      title: '开始时间不能大于结束时间',
      icon: 'none',
      mask: true,
    });
    return;
  }
  if (endDate || startDate) {
    startDate = startDate
      ? formatByDayjs(startDate, 'YYYY-MM-DD 00:00:00')
      : formatByDayjs(endDate, 'YYYY-MM-DD 00:00:00');
    endDate = endDate
      ? formatByDayjs(endDate, 'YYYY-MM-DD 00:00:00')
      : formatByDayjs(startDate, 'YYYY-MM-DD 00:00:00');
    state.value['webSql'] = `a.create_time between '${startDate}' and '${endDate}'`;
  } else {
    state.value['webSql'] = null;
  }
  const params = {};
  const arr = ['taskCode', 'demandCode', 'projectCode', 'webSql', 'projectName', 'names'];
  for (const key in state.value) {
    if (Object.prototype.hasOwnProperty.call(state.value, key)) {
      const element = state.value[key];
      if (arr.includes(key) && element) {
        params[key] = element;
      }
    }
  }
  // const todoList = ['checkColor', 'reviewColor', 'assignColor'];
  switch (state.value['names']) {
    case '待审核':
      params.checkColor = 1;

      params['names'] = '';
      break;
    // case '待评审':
    //   params.reviewColor = 1;
    //   params['names'] = '';
    //   break;
    case '待指派':
    case '待指派人':
    case '待指派人员':
      params.assignColor = 1;
      params['names'] = '';
      break;
    case '通过':
    case '待评审':
    case '已终止':
    case '未提交':
    case '不通过':
      const par = review_status.value.find((item) => item.label == state.value['names']);
      if (par) {
        params.reviewStatus = par.value;
        params['names'] = '';
      }
      break;
  }

  // const params = { ...state.value };
  // delete params.startTime;
  // delete params.endTime;

  getRdDemandPage({
    current: page.value,
    descs: 'create_time',
    size: size.value,
    ...params,
  })
    .then((res) => {
      if (res.code !== 0) {
        uni.showToast({
          title: res.msg,
          icon: 'none',
        });
        return;
      }
      dataList.value = dataList.value.concat(res.data.records);
      uni.stopPullDownRefresh();
      if (res.data.records.length === size.value) {
        loadMore.value = 'loadEnd';
      } else {
        loadMore.value = 'finished';
      }
    })
    .catch((err) => {
      loadMore.value = 'finished';
      uni.showToast({
        title: err.data?.msg || err.msg,
        icon: 'none',
      });
    })
    .finally(() => {
      uni.hideLoading();
      loading.value = false;
      uni.stopPullDownRefresh();
    });
};

const goBack = () => {
  uni.navigateBack();
};
const statusH = ref(0);
const listPT = ref('0');
onLoad(() => {
  const sysInfo = uni.getSystemInfoSync();
  console.log(sysInfo, 112);
  statusH.value = sysInfo.statusBarHeight;
  listPT.value = statusH.value + 90 + 'px';
  getData();
});
const handleClose = () => {
  filterIsShow.value = false;
};

const resetFilter = () => {
  handleClose();
  state.value.demandCode = null;
  state.value.projectName = null;
  state.value.names = null;
  state.value.projectCode = null;
  state.value.startTime = null;
  state.value.endTime = null;
  handleSearch();
};
const handleSearch = (e?) => {
  dataList.value = [];
  page.value = 1;
  getData();
  filterIsShow.value = false;
};
const hintScanHandle = () => {
  uni.showModal({
    title: '提示',
    content: '请扫描正确单号二维码',
    showCancel: false,
    success: ({ confirm, cancel }) => {},
  });
};

const scanCode = () => {
  uni.scanCode({
    success: function (res) {
      console.log('条码类型：' + res.scanType);
      console.log('条码内容：' + res.result);

      const code = res.result;
      // 判断是否是需求单的编码
      if (code.indexOf('pm_scan') == 0) {
        const s = code.replace('pm_scan', '');

        /**
           *  const j = {
                id: form.id,
                taskCode: form.taskCode,
                demandCode: form.demandCode,
                page: '/pages/pm/task/detail',
              };
          */
        const o = JSON.parse(s);
        if (o.sianApp == 'pm_task') {
          uni.navigateTo({
            url: '/pages/pm/task/detail?params=' + s,
          });
        } else {
          hintScanHandle();
        }
      } else {
        hintScanHandle();
      }
    },
  });
};

onPullDownRefresh(() => {
  //重新获取
  if (loading.value) return;
  dataList.value = [];
  page.value = 1;
  getData();
});
onReachBottom(() => {
  console.log(loading.value, loadMore.value, '111111111');

  if (loading.value) return;
  if (loadMore.value === 'loadEnd') {
    page.value++;
    getData();
  }
});
onUnload(() => {
  uni.$off('refreshList');
  uni.removeStorageSync('is_big');
});
// const handleSearch = () => {
//   dataList.value = [];
//   page.value = 1;
// };
</script>

<style lang="scss" scoped>
$padding: 30rpx;

.canvas-box {
  .canvas {
    height: 300rpx;
    transition: height 0.3s;
  }

  .btns {
    margin-top: 10rpx;
    transition: transform 0.3s;

    .btn {
      width: auto;
      height: 50rpx;
    }
  }
}

.full-screen {
  flex-direction: row;
  height: calc(100vh - 88rpx);

  .canvas {
    width: calc(100% - 100rpx);
    height: 100%;
    margin-left: 100rpx;
  }

  .btns {
    position: absolute;
    align-items: center;
    width: calc(100vh - (88rpx + $padding * 2));
    height: 100rpx;
    transform: translate(100rpx, 0) rotate(90deg);
    transform-origin: top left;

    .btn-box {
      flex-direction: row;
    }
  }
}

:deep(.wd-navbar__left--hover) {
  background: none;
}

.tabbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 10;
  background: linear-gradient(45deg, #0081ff, #1ab3f5);
}

.tabbar_c {
  height: 100%;
  font-weight: 800;
  color: white;
  letter-spacing: 2px;
  background: linear-gradient(45deg, #0081ff, #1ab3f5);
}

.cu-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
}

.cu-bar .search-form {
  display: flex;
  flex: 1;
  align-items: center;
  height: 64rpx;
  margin: 0 30rpx;
  overflow: hidden;
  /* padding: 0 40rpx; */
  font-size: 24rpx;
  line-height: 64rpx;
  color: #333;
  background-color: white;
}

.search-container .filter-icon {
  padding: 0 18rpx;
  margin: 0;
  font-size: 40rpx;
  color: #007aff;
  border-left: 1rpx solid #f3f3f3;
}

.round {
  border-radius: 2500px;
}

.cu-bar .search-form + .action {
  margin-right: 30rpx;
}

.cu-bar .action {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  height: 100%;
}

.search-container .action .cu-btn {
  padding: 0 24rpx;
}

.bg-gradual-green {
  color: #fff;
  background-image: linear-gradient(45deg, #39b54a, #8dc63f);
}

.bg-gradual-blue {
  color: #fff;
  background-image: linear-gradient(45deg, #0c62d3, #2a73d3);
}

.cu-btn {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 64rpx;
  padding: 0 30rpx;
  margin-right: initial;
  margin-left: initial;
  overflow: visible;
  font-size: 28rpx;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  border: 0;
  transform: translate(0, 0);
}

.cu-dialog {
  font-size: 28rpx;
}

.cu-dialog > .cu-bar:first-child .action {
  margin-right: 20rpx;
}

.filter_container {
  padding: 10rpx 32rpx 32rpx;
  padding-bottom: 64rpx;
  text-align: left;
  background-color: #fff;

  .block {
    ~ .block {
      margin-top: 32rpx;
    }

    .label {
      margin-bottom: 20rpx;
      font-weight: bold;
    }
  }

  .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;

    .date-picker {
      flex: 1;
      padding: 16rpx;
      text-align: center;
      background-color: #f7f7f7;
      border-radius: 8rpx;
    }

    .select-box {
      flex: 1;
      padding: 16rpx;
      background-color: #f7f7f7;
      border-radius: 8rpx;

      :deep(.select-row) {
        padding: 0;
        background: none;
      }
    }

    input {
      flex: 1;
      height: 33rpx;
      padding: 16rpx 12rpx;
      font-size: 26rpx !important;
      background-color: #f7f7f7;
      border: 1rpx solid #f7f7f7;
      border-radius: 8rpx;

      .input-placeholder {
        color: #8a929f;
      }
    }

    .btn {
      flex: 1;
      padding: 16rpx;
      color: #999;
      text-align: center;
      background-color: #f7f7f7;
      border: 1rpx solid #dedede;
      border-radius: 8rpx;

      ~ .btn {
        margin-left: 24rpx;
      }

      &.primary {
        color: #fff;
        background-color: #007aff;
        border-color: #007aff;
      }
    }
  }
}

:deep(.wd-navbar__left--hover) {
  background: none;
}

.s-date {
  .wd-picker__cell {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
}
</style>
